<template>
  <a-row :gutter="16">
    <a-col v-for="(group, index) in groupList" :key="index" :span="6">
      <a-card class="cardBox" bordered hoverable size="small">
        <!--  -->
        <!-- 卡片头部 -->
        <div slot="title">
          <a-row :gutter="16">
            <a-col :span="22">
              <a-collapse v-model="collapseKey" class="collapseArea" expandIconPosition="right">
                <a-collapse-panel :key="group.bgcolor">
                  <div @click.stop="() => {}" slot="header" class="collapseArea_header">
                    分组名称：<a-input
                      @click.stop="() => {}"
                      v-model="group.name"
                      style="width: 180px"
                      allow-clear
                      :maxLength="30"
                      placeholder="请输入分组名称："
                    />
                  </div>
                  <a-row :gutter="16"
                    ><a-col :span="24"
                      >日期类型：<RadioYesNo
                        :dataList="dayList"
                        :value="group.daytype"
                        :index="index"
                        field="daytype"
                        @f_setYesNo="s_setYesNo" /></a-col
                  ></a-row>
                  <a-row :gutter="16"
                    ><a-col :span="24"
                      >开启办结时限：<RadioYesNo
                        :dataList="yesnoList"
                        :value="group.limitable"
                        :index="index"
                        field="limitable"
                        @f_setYesNo="s_setYesNo" /></a-col
                  ></a-row>
                  <a-row :gutter="16"
                    ><a-col :span="24"
                      >限时天数：<a-input-number
                        v-model="group.daylimit"
                        style="width: 150px"
                        placeholder="请输入限时天数"
                        :min="1" /></a-col
                  ></a-row>
                  <a-row :gutter="16"
                    ><a-col :span="24"
                      >告警天数：<a-input-number
                        v-model="group.daywarn"
                        style="width: 150px"
                        placeholder="请输入告警天数"
                        :max="-1" /></a-col
                  ></a-row>
                </a-collapse-panel>
              </a-collapse>
            </a-col>
            <a-col :span="1">
              <a-popconfirm
                class="plusBox"
                title="确定删除吗？"
                ok-text="是"
                cancel-text="否"
                @confirm="delGroup(index)"
              >
                <a-icon type="close" />
              </a-popconfirm>
            </a-col>
          </a-row>
        </div>

        <!-- 拖动区域 -->
        <draggable
          v-show="collapseKey.includes(group.bgcolor) == false"
          class="cardBox_nodelist"
          v-model="group.list"
          group="itxst"
          animation="300"
          :move="onMoveRight"
          @add="add($event, index)"
          filter=".forbid"
        >
          <transition-group>
            <div v-for="(item, s_index) in group.list" :key="item.id">
              <template v-if="item.id == 1">
                <div class=".forbid">
                  背景颜色: <colorPicker @change="colorChange($event, index)" :value="group.bgcolor" />
                </div>
              </template>
              <template v-else>
                <div class="item2" :style="group.bgcolor ? `background: ${group.bgcolor};` : ''">
                  {{ item.name }}
                  <a href="javascript:void(0);"><a-icon type="close" @click="delNode(index, s_index)" /></a>
                </div>
              </template>
            </div>
          </transition-group>
        </draggable>
      </a-card>
    </a-col>
  </a-row>
</template>
<script>
//导入draggable组件
import { Tp_dayValue } from '@/enumeration/Tp_day.js'
export default {
  props: {
    f_groupList: {
      type: Array,
      require: true,
    },
    // 流程环节顺序
    nodeOrderList: {
      type: Array,
      require: true,
    },
  },
  data() {
    return {
      dayList: [
        { key: Tp_dayValue.WORKDAY, name: '工作日' },
        { key: Tp_dayValue.NATUREDAY, name: '自然日' },
      ],
      yesnoList: [
        { key: 3200, name: '是' },
        { key: 3201, name: '否' },
      ],
      collapseKey: [], // 折叠面板key
      groupList: this.f_groupList || [],
      moveId: -1,
    }
  },
  methods: {
    // 颜色选择器回调
    colorChange(color, index) {
      // console.log('颜色选择器', e)
      this.groupList[index].bgcolor = color
      this.groupList[index].list.forEach((v) => {
        v.bgcolor = color
      })
      this.$emit('f_addColor', color, this.groupList[index].list)
    },
    // 父组件调用, 重置环节组
    f_reset() {
      for (let i = this.groupList.length - 1; i >= 0; i--) {
        this.groupList[i].list = [{ id: 1, name: '占位符', bgcolor: this.groupList[i].bgcolor }]
      }
    },
    // 父组件调用, 添加节点
    f_addNode() {
      let bgcolor = this.setRgbColor()
      this.groupList.push({
        name: '',
        bgcolor: bgcolor,
        daytype: Tp_dayValue.WORKDAY,
        limitable: 3200,
        daylimit: 15,
        daywarn: -5,
        list: [{ id: 1, bgcolor: bgcolor, name: '占位符' }],
      })
    },
    // 父组件调用, 返回配置数据
    f_checkNode() {
      // this.groupList
      let result = { status: false }
      let groupList = []
      let i = 0
      for (let g of this.groupList) {
        if (!g.name) {
          this.$message.warning('请输入分组名称')
          return result
        }
        // 如果只有一个并且是占位原始说明没有配置环节
        if (g.list.length == 1 && g.list[0].id === 1) {
          this.$message.warning(`请给[${g.name}]配置环节`)
          return result
        }
        if (Math.abs(g.daywarn) > g.daylimit) {
          this.$message.warning(`[${g.name}]配置环节的告警天数不能大于限时天数`)
          return result
        }
        let scatObj = {
          formid: this.$route.params.formid,
          name: g.name,
          limitable: g.limitable,
          daytype: g.daytype,
          daylimit: g.daylimit,
          daywarn: g.daywarn,
          bgcolor: g.bgcolor ? g.bgcolor : this.setRgbColor(),
          indexsort: i,
        }
        scatObj.list = this.configStep(g.list)
        // 组装环节列表
        groupList.push(scatObj)
        i++
      }
      result.status = true
      result.value = groupList
      return result
    },
    // 计算组件环节列表
    configStep(steplist) {
      // 找出当前分组的最后节点的id
      let endObj = {
        index: -1,
        stepid: null
      }
      for (let v of steplist) {
        let index = this.nodeOrderList.indexOf(v.id)
        if (index > endObj.index) {
          endObj.index = index
          endObj.stepid = v.id
        }
      }
      if (endObj.index == -1) {
        this.$message.error('未找到当前环节点最后节点')
      }
      // console.log('最大节点', steplist, endObj.stepid)
      // 组装数据
      let stepArr = []
      let i = 0
      steplist.forEach((v) => {
        let stepObj = {
          stepid: v.id,
          islast: endObj.stepid == v.id ? 3200 : 3201,
          formid: this.$route.params.formid,
          indexsort: i,
        }
        stepArr.push(stepObj)
        i++
      })
      return stepArr
    },
    // 删除分组
    delGroup(index) {
      this.$emit('f_delGroup', this.groupList[index].list)
      this.groupList.splice(index, 1)
    },
    // 日期类型单选
    s_setYesNo(value, field, f_field, index) {
      this.groupList[index][field] = value
    },
    // 删除节点
    delNode(index, s_index) {
      this.$emit('f_delnode', this.groupList[index].list.splice(s_index, 1)[0])
      if (this.groupList[index].list.length == 0) {
        console.log('没有了')
        this.groupList[index].list.push({ id: 1, name: '占位符' })
      }
    },
    // 父组件添加元素回调
    add(e, index) {
      // 删除占位符
      let i = 0
      for (let g of this.groupList[index].list) {
        if (g.id == 1) {
          console.log('删除', index, this.groupList[index].list)
          this.groupList[index].list.splice(i, 1)
          return
        }
        i++
      }
    },
    //move回调方法 控制是否可拖拽
    onMoveRight(e, originalEvent) {
      return false
    },
    // 获取随机背景色
    setRgbColor() {
      var r = parseInt(Math.random() * 200)
      var g = parseInt(Math.random() * 200)
      var b = parseInt(Math.random() * 200)

      return 'rgb(' + r + ',' + g + ',' + b + ')'
    },
  },
  components: {
    draggable: () => import('vuedraggable'),
    RadioYesNo: () => import('@/views/businessAssembly/public/spareparts/radioYesNo.vue'),
  },
}
</script>
<style lang="less" scoped>
.collapseArea {
  border: none;
  .ant-collapse-item {
    border-bottom: none;
  }
  /deep/.ant-collapse-content {
    border-top: none;
  }
}
/deep/ .ant-collapse-header {
  background-color: #fff;
}
.collapseArea_header {
  .ant-form-item {
    margin-bottom: 0;
  }
}

.collapseArea_body {
  padding-top: 10px;
  padding: 0 20px 0 0px;
  border: 1px solid blue;
}
.cardBox {
  height: 30vh;
  &_nodelist {
    height: 20vh;
    overflow: auto;
  }
}
.col {
  width: 40%;
  flex: 1;
  padding: 10px;
  border: solid 1px #eee;
  border-radius: 5px;
  float: left;
}
.col + .col {
  margin-left: 10px;
}
.item {
  padding: 6px 12px;
  margin: 0px 10px 0px 10px;
  border: solid 1px #eee;
  background-color: #f1f1f1;
  text-align: left;
}
.item + .item {
  border-top: none;
  margin-top: 6px;
}

.item:hover {
  background-color: #fdfdfd;
  cursor: move;
}
.item2 {
  padding: 6px 12px;
  margin: 4px;
  border: none;
  background-color: #eee;
  text-align: left;
  display: flex;
  justify-content: space-between;
}
.item2 + .item2 {
  border-top: none;
  margin-top: 6px;
}

.item2:hover {
  outline: solid 1px #ddd;
  cursor: move;
}
</style>